<template>
  <header class="global-header" :class="{ 'admin-header': isAdmin }">
    <div class="container mx-auto px-4 h-full">
      <div class="flex items-center justify-between h-full">
        <!-- Logo和导航区域 -->
        <div class="flex items-center">
          <router-link
            to="/"
            class="flex items-center space-x-2 no-underline logo-container"
          >
            <img
              src="@/assets/images/logo.png"
              alt="贵港文旅+"
              class="h-12 w-12 logo-image"
            />
            <span
              class="text-xl font-bold text-primary-600 dark:text-primary-400 logo-text"
              >贵港文旅+</span
            >
          </router-link>

          <!-- 主导航 - 大屏幕显示 -->
          <nav class="main-nav">
            <router-link
              v-for="item in navItems"
              :key="item.path.name"
              :to="item.path"
              class="nav-link"
              :class="{ active: isActive(item.path.name) }"
            >
              <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
              <span>{{ item.name }}</span>
            </router-link>
          </nav>
        </div>

        <!-- 搜索和用户区域 -->
        <div class="flex items-center space-x-4">
          <!-- 搜索框 - 大屏幕显示 -->
          <div class="search-box">
            <div class="relative">
              <a-input
                v-model="searchQuery"
                placeholder="搜索景点/攻略/商品"
                :style="{ width: '200px', transition: 'all 0.3s' }"
                :style-focus="{ width: '240px' }"
                allow-clear
                @input="handleInputChange"
                @press-enter="handleSearch"
                @focus="headerSearchFocused = true"
                @blur="handleHeaderSearchBlur"
              >
                <template #prefix>
                  <icon-search />
                </template>
              </a-input>

              <!-- 统一的搜索下拉窗口 -->
              <div
                v-if="headerSearchFocused || headerSuggestionHovered"
                class="header-search-dropdown"
                @mouseenter="headerSuggestionHovered = true"
                @mouseleave="headerSuggestionHovered = false"
              >
                <!-- 搜索联想结果 -->
                <div
                  v-if="searchSuggestions.length > 0"
                  class="search-dropdown-section"
                >
                  <div class="search-dropdown-header">
                    <span class="search-dropdown-title">搜索建议</span>
                  </div>
                  <div class="search-dropdown-items">
                    <div
                      v-for="(item, index) in searchSuggestions"
                      :key="`suggestion-${index}`"
                      class="search-dropdown-item"
                      @click="
                        () => {
                          searchQuery = item;
                          handleSearch();
                        }
                      "
                    >
                      <icon-search class="search-dropdown-icon" />
                      <span>{{ item }}</span>
                    </div>
                  </div>
                </div>

                <!-- 搜索按钮 (当有查询文本时显示) -->
                <div v-if="searchQuery.trim()" class="search-dropdown-section">
                  <a-button
                    type="primary"
                    size="small"
                    class="w-full"
                    @click="handleSearch"
                  >
                    <template #icon>
                      <icon-search />
                    </template>
                    搜索: {{ searchQuery }}
                  </a-button>
                </div>

                <!-- 最近搜索 -->
                <div
                  v-if="searchHistory.length > 0"
                  class="search-dropdown-section"
                >
                  <div class="search-dropdown-header">
                    <span class="search-dropdown-title">最近搜索</span>
                    <a-button
                      type="text"
                      size="mini"
                      status="danger"
                      @click.stop="clearSearchHistory"
                    >
                      清空
                    </a-button>
                  </div>
                  <div class="search-dropdown-items">
                    <div
                      v-for="(item, index) in searchHistory.slice(0, 5)"
                      :key="`history-${index}`"
                      class="search-dropdown-item"
                      @click="
                        () => {
                          searchQuery = item;
                          handleSearch();
                        }
                      "
                    >
                      <icon-clock-circle class="search-dropdown-icon" />
                      <span>{{ item }}</span>
                    </div>
                  </div>
                </div>

                <!-- 热门搜索 -->
                <div class="search-dropdown-section">
                  <div class="search-dropdown-header">
                    <span class="search-dropdown-title">热门搜索</span>
                  </div>
                  <div class="search-dropdown-tags">
                    <a-tag
                      v-for="(item, index) in hotSearchTerms.slice(0, 8)"
                      :key="`hot-${index}`"
                      size="small"
                      color="arcoblue"
                      checkable
                      class="search-dropdown-tag"
                      @click.stop="
                        () => {
                          searchQuery = item;
                          handleSearch();
                        }
                      "
                    >
                      <template #icon>
                        <icon-fire />
                      </template>
                      {{ item }}
                    </a-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 功能按钮组 -->
          <div class="flex items-center -space-x-1">
            <!-- 全屏按钮 -->
            <el-tooltip
              content="全屏"
              placement="bottom"
              class="hidden lg:block"
            >
              <el-button
                type="text"
                class="action-icon-btn !w-8 !h-8 !p-0"
                @click="toggleFullscreen"
              >
                <el-icon class="text-lg"
                  ><FullScreen v-if="!isFullscreen" /><Aim v-else
                /></el-icon>
              </el-button>
            </el-tooltip>

            <!-- 主题切换按钮 -->
            <el-tooltip
              content="切换主题"
              placement="bottom"
              class="hidden lg:block"
            >
              <el-button
                type="text"
                class="action-icon-btn !w-8 !h-8 !p-0"
                @click="toggleTheme"
              >
                <el-icon class="text-lg"
                  ><Moon v-if="isDarkMode" /><Sunny v-else
                /></el-icon>
              </el-button>
            </el-tooltip>

            <!-- 智能客服按钮 -->
            <el-tooltip content="客服" placement="bottom">
              <el-button
                type="text"
                class="action-icon-btn !w-8 !h-8 !p-0"
                @click="router.push('/service')"
              >
                <el-icon class="text-lg"><Service /></el-icon>
              </el-button>
            </el-tooltip>

            <!-- AI智能助手按钮 -->
            <el-tooltip content="AI智能助手" placement="bottom">
              <el-button
                type="text"
                class="action-icon-btn !w-8 !h-8 !p-0"
                @click="router.push('/ai-chat')"
              >
                <el-icon class="text-lg"><ChatRound /></el-icon>
              </el-button>
            </el-tooltip>
          </div>

          <!-- 移动端菜单按钮 -->
          <el-button
            class="menu-btn"
            type="text"
            @click="mobileMenuVisible = true"
          >
            <el-icon><Menu /></el-icon>
          </el-button>

          <!-- 用户区域 -->
          <template v-if="!isLoggedIn">
            <el-button type="primary" @click="handleLogin" class="login-btn"
              >登录</el-button
            >
          </template>
          <template v-else>
            <el-dropdown trigger="click" @command="handleCommand">
              <div
                class="flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full p-1 transition-all duration-300"
              >
                <el-avatar :size="32" :src="userAvatar" class="user-avatar">
                  <img src="/default-avatar.png" alt="默认头像" />
                </el-avatar>
              </div>
              <template #dropdown>
                <el-dropdown-menu class="user-dropdown-menu">
                  <div class="user-info-section">
                    <div class="user-avatar-large">
                      <el-avatar
                        :size="48"
                        :src="userAvatar"
                        class="flex-shrink-0"
                      >
                        <img src="/default-avatar.png" alt="默认头像" />
                      </el-avatar>
                    </div>
                    <div class="user-details">
                      <div class="user-name">{{ userName }}</div>
                      <div class="user-email">{{ userEmail }}</div>
                    </div>
                  </div>
                  <div class="menu-section">
                    <el-dropdown-item command="profile" class="menu-item group">
                      <el-icon><User /></el-icon>
                      <span>个人中心</span>
                      <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                    </el-dropdown-item>
                    <el-dropdown-item command="orders" class="menu-item group">
                      <el-icon><List /></el-icon>
                      <span>我的订单</span>
                      <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                    </el-dropdown-item>
                    <el-dropdown-item
                      command="favorites"
                      class="menu-item group"
                    >
                      <el-icon><Star /></el-icon>
                      <span>我的收藏</span>
                      <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                    </el-dropdown-item>
                    <el-dropdown-item
                      command="messages"
                      class="menu-item group"
                    >
                      <el-icon><Message /></el-icon>
                      <span>消息中心</span>
                      <div class="badge" v-if="unreadMessages">
                        {{ unreadMessages }}
                      </div>
                    </el-dropdown-item>
                    <el-dropdown-item command="reviews" class="menu-item group">
                      <el-icon><ChatDotRound /></el-icon>
                      <span>我的评价</span>
                      <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                    </el-dropdown-item>
                    <el-dropdown-item
                      command="settings"
                      class="menu-item group"
                    >
                      <el-icon><Setting /></el-icon>
                      <span>设置</span>
                      <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                    </el-dropdown-item>
                  </div>
                  <div class="divider"></div>
                  <div class="footer-section">
                    <el-dropdown-item
                      command="logout"
                      class="menu-item logout-item"
                    >
                      <el-icon><SwitchButton /></el-icon>
                      <span>退出登录</span>
                    </el-dropdown-item>
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </div>
      </div>

      <!-- 移动端菜单抽屉 -->
      <el-drawer
        v-model="mobileMenuVisible"
        title="菜单导航"
        direction="left"
        size="100%"
        :with-header="false"
        class="mobile-menu-drawer"
      >
        <div class="mobile-menu">
          <!-- 抽屉头部 -->
          <div class="drawer-header">
            <router-link
              to="/"
              class="flex items-center space-x-2 no-underline"
              @click="mobileMenuVisible = false"
            >
              <img
                src="@/assets/images/logo.png"
                alt="贵港文旅+"
                class="h-8 w-8"
              />
              <span
                class="text-xl font-bold text-primary-600 dark:text-primary-400"
                >贵港文旅+</span
              >
            </router-link>
            <el-button
              type="text"
              @click="mobileMenuVisible = false"
              class="close-btn"
            >
              <el-icon><Close /></el-icon>
            </el-button>
          </div>

          <div class="mobile-menu-content">
            <!-- 用户信息区域 -->
            <div class="mobile-user-section">
              <template v-if="isLoggedIn">
                <div
                  class="user-profile-card"
                  @click="router.push('/user/overview')"
                >
                  <el-avatar
                    :size="56"
                    :src="userAvatar"
                    class="user-avatar-large"
                  >
                    <img src="/default-avatar.png" alt="默认头像" />
                  </el-avatar>
                  <div class="user-info">
                    <div class="user-name">{{ userName }}</div>
                    <div class="user-email">{{ userEmail }}</div>
                    <div class="view-profile-btn">
                      <span>查看个人主页</span>
                      <el-icon><ArrowRight /></el-icon>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="login-prompt">
                  <div class="welcome-text">欢迎来到贵港文旅+</div>
                  <div class="login-actions">
                    <el-button
                      type="primary"
                      size="large"
                      class="login-btn"
                      @click="handleLogin"
                    >
                      登录
                    </el-button>
                    <el-button
                      plain
                      size="large"
                      class="register-btn"
                      @click="router.push('/register')"
                    >
                      注册
                    </el-button>
                  </div>
                </div>
              </template>
            </div>

            <!-- 搜索框区域 -->
            <div class="mobile-search-section">
              <div class="relative w-full">
                <a-input
                  v-model="searchQuery"
                  placeholder="搜索景点/攻略/商品"
                  class="mobile-search-input"
                  allow-clear
                  @input="handleInputChange"
                  @press-enter="handleMobileSearch"
                  @focus="mobileSearchFocused = true"
                  @blur="handleMobileSearchBlur"
                >
                  <template #prefix>
                    <icon-search />
                  </template>
                </a-input>

                <!-- 搜索下拉窗口 -->
                <div
                  v-if="mobileSearchFocused || mobileSuggestionHovered"
                  class="mobile-search-dropdown"
                  @mouseenter="mobileSuggestionHovered = true"
                  @mouseleave="mobileSuggestionHovered = false"
                >
                  <!-- 搜索联想结果 -->
                  <div
                    v-if="searchSuggestions.length > 0"
                    class="search-dropdown-section"
                  >
                    <div class="search-dropdown-header">
                      <span class="search-dropdown-title">搜索建议</span>
                    </div>
                    <div class="search-dropdown-items">
                      <div
                        v-for="(item, index) in searchSuggestions"
                        :key="`mobile-suggestion-${index}`"
                        class="search-dropdown-item"
                        @click="
                          () => {
                            searchQuery = item;
                            handleMobileSearch();
                          }
                        "
                      >
                        <icon-search class="search-dropdown-icon" />
                        <span>{{ item }}</span>
                      </div>
                    </div>
                  </div>

                  <!-- 搜索按钮 (当有查询文本时显示) -->
                  <div
                    v-if="searchQuery.trim()"
                    class="search-dropdown-section"
                  >
                    <a-button
                      type="primary"
                      size="small"
                      class="w-full"
                      @click="handleMobileSearch"
                    >
                      <template #icon>
                        <icon-search />
                      </template>
                      搜索: {{ searchQuery }}
                    </a-button>
                  </div>

                  <!-- 最近搜索 -->
                  <div
                    v-if="searchHistory.length > 0"
                    class="search-dropdown-section"
                  >
                    <div class="search-dropdown-header">
                      <span class="search-dropdown-title">最近搜索</span>
                      <a-button
                        type="text"
                        size="mini"
                        status="danger"
                        @click.stop="clearSearchHistory"
                      >
                        清空
                      </a-button>
                    </div>
                    <div class="search-dropdown-items">
                      <div
                        v-for="(item, index) in searchHistory.slice(0, 5)"
                        :key="`mobile-history-${index}`"
                        class="search-dropdown-item"
                        @click="
                          () => {
                            searchQuery = item;
                            handleMobileSearch();
                          }
                        "
                      >
                        <icon-clock-circle class="search-dropdown-icon" />
                        <span>{{ item }}</span>
                      </div>
                    </div>
                  </div>

                  <!-- 热门搜索 -->
                  <div class="search-dropdown-section">
                    <div class="search-dropdown-header">
                      <span class="search-dropdown-title">热门搜索</span>
                    </div>
                    <div class="search-dropdown-tags">
                      <a-tag
                        v-for="(item, index) in hotSearchTerms"
                        :key="`mobile-hot-${index}`"
                        size="small"
                        color="arcoblue"
                        checkable
                        class="search-dropdown-tag"
                        @click="
                          () => {
                            searchQuery = item;
                            handleMobileSearch();
                          }
                        "
                      >
                        <template #icon>
                          <icon-fire />
                        </template>
                        {{ item }}
                      </a-tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 快捷功能区 -->
            <div class="mobile-quick-actions">
              <div class="quick-action-title">快捷功能</div>
              <div class="quick-action-grid">
                <div class="quick-action-item" @click="toggleFullscreen">
                  <el-icon
                    ><FullScreen v-if="!isFullscreen" /><Aim v-else
                  /></el-icon>
                  <span>{{ isFullscreen ? "退出全屏" : "全屏" }}</span>
                </div>
                <div class="quick-action-item" @click="router.push('/service')">
                  <el-icon><Service /></el-icon>
                  <span>客服</span>
                </div>
                <div class="quick-action-item" @click="router.push('/ai-chat')">
                  <el-icon><ChatRound /></el-icon>
                  <span>AI助手</span>
                </div>
                <div class="quick-action-item" @click="toggleTheme">
                  <el-icon><Moon v-if="isDarkMode" /><Sunny v-else /></el-icon>
                  <span>{{ isDarkMode ? "亮色" : "暗色" }}</span>
                </div>
              </div>
            </div>

            <!-- 天气卡片 -->
            <div v-if="weather" class="mobile-weather-card">
              <div class="weather-info-container">
                <div class="weather-left">
                  <div class="city-temp">
                    <span class="temp">{{ weather.temperature }}°</span>
                    <span class="city">{{ weather.city }}</span>
                  </div>
                  <div class="weather-desc">
                    {{ weather.description }} · 湿度: {{ weather.humidity }}%
                  </div>
                </div>
                <div class="weather-icon">
                  <el-icon><Sunny /></el-icon>
                </div>
              </div>
            </div>

            <!-- 主导航区域 -->
            <nav class="mobile-nav-menu">
              <div class="nav-menu-title">菜单导航</div>
              <div class="nav-menu-list">
                <router-link
                  v-for="(item, index) in navItems"
                  :key="item.path.name"
                  :to="item.path"
                  class="mobile-nav-link"
                  :class="{
                    active: isActive(item.path.name),
                    'slide-in': navItemsShow,
                  }"
                  :style="{
                    '--delay': `${index * 0.05}s`,
                    '--index': index,
                  }"
                  @click="mobileMenuVisible = false"
                >
                  <div class="link-content">
                    <el-icon class="nav-icon"
                      ><component :is="item.icon"
                    /></el-icon>
                    <span class="nav-text">{{ item.name }}</span>
                  </div>
                  <div class="link-indicator">
                    <el-icon><ArrowRight /></el-icon>
                  </div>
                </router-link>
              </div>
            </nav>

            <!-- 用户功能区 -->
            <template v-if="isLoggedIn">
              <div class="mobile-user-menu">
                <div class="user-menu-title">个人中心</div>
                <div class="user-menu-list">
                  <router-link
                    to="/user/overview"
                    class="mobile-nav-link"
                    @click="mobileMenuVisible = false"
                  >
                    <div class="link-content">
                      <el-icon class="nav-icon"><User /></el-icon>
                      <span class="nav-text">个人中心</span>
                    </div>
                    <div class="link-indicator">
                      <el-icon><ArrowRight /></el-icon>
                    </div>
                  </router-link>
                  <router-link
                    to="/user/orders"
                    class="mobile-nav-link"
                    @click="mobileMenuVisible = false"
                  >
                    <div class="link-content">
                      <el-icon class="nav-icon"><List /></el-icon>
                      <span class="nav-text">我的订单</span>
                    </div>
                    <div class="link-indicator">
                      <el-icon><ArrowRight /></el-icon>
                    </div>
                  </router-link>
                  <router-link
                    to="/user/favorites"
                    class="mobile-nav-link"
                    @click="mobileMenuVisible = false"
                  >
                    <div class="link-content">
                      <el-icon class="nav-icon"><Star /></el-icon>
                      <span class="nav-text">我的收藏</span>
                    </div>
                    <div class="link-indicator">
                      <el-icon><ArrowRight /></el-icon>
                    </div>
                  </router-link>
                  <router-link
                    to="/user/messages"
                    class="mobile-nav-link"
                    @click="mobileMenuVisible = false"
                  >
                    <div class="link-content">
                      <el-icon class="nav-icon"><Message /></el-icon>
                      <span class="nav-text">消息中心</span>
                      <div v-if="unreadMessages" class="unread-badge">
                        {{ unreadMessages }}
                      </div>
                    </div>
                    <div class="link-indicator">
                      <el-icon><ArrowRight /></el-icon>
                    </div>
                  </router-link>
                  <router-link
                    to="/user/settings"
                    class="mobile-nav-link"
                    @click="mobileMenuVisible = false"
                  >
                    <div class="link-content">
                      <el-icon class="nav-icon"><Setting /></el-icon>
                      <span class="nav-text">设置</span>
                    </div>
                    <div class="link-indicator">
                      <el-icon><ArrowRight /></el-icon>
                    </div>
                  </router-link>
                </div>
              </div>
            </template>

            <!-- 底部区域 -->
            <div class="mobile-menu-footer">
              <div class="app-version">贵港文旅+ v1.0.0</div>
              <template v-if="isLoggedIn">
                <div class="logout-button" @click="handleMobileLogout">
                  <el-icon><SwitchButton /></el-icon>
                  <span>退出登录</span>
                </div>
              </template>
            </div>
          </div>
        </div>
      </el-drawer>
    </div>
  </header>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/stores/user";
import { useThemeStore } from "@/stores/theme";
import { ElMessage } from "element-plus";
import {
  Search,
  Menu,
  ArrowDown,
  User,
  List,
  Star,
  Message,
  SwitchButton,
  Location,
  Shop,
  Guide,
  Service,
  Moon,
  Sunny,
  House,
  ChatDotRound,
  Close,
  ArrowRight,
  FullScreen,
  Aim,
  Setting,
  Document,
  HomeFilled,
  ChatRound,
} from "@element-plus/icons-vue";
import {
  IconSearch,
  IconClockCircle,
  IconFire,
} from "@arco-design/web-vue/es/icon";
import { getSearchSuggestions } from "@/api/search";

const props = defineProps({
  isAdmin: {
    type: Boolean,
    default: false,
  },
});

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const themeStore = useThemeStore();

// 主题状态
const isDarkMode = computed(() => themeStore.isDarkMode);

// 切换主题
const toggleTheme = () => {
  themeStore.toggleTheme();
};

// 导航项
const navItems = [
  { name: "首页", path: { name: "Home" }, icon: House },
  { name: "景点全览", path: { name: "Spots" }, icon: Location },
  { name: "寻找攻略", path: { name: "TravelGuides" }, icon: Guide },
  { name: "新闻资讯", path: { name: "News" }, icon: Document },
  { name: "文创商城", path: { name: "Shop" }, icon: Shop },
  { name: "酒店预订", path: { name: "Hotel" }, icon: HomeFilled },
  { name: "社区", path: { name: "Community" }, icon: ChatDotRound },
];

// 状态管理
const searchQuery = ref("");
const mobileMenuVisible = ref(false);
const isLoggedIn = computed(() => userStore.token !== null);
const userName = computed(() => userStore.userInfo?.name || "用户");
const userAvatar = computed(
  () => userStore.userInfo?.avatar || "/default-avatar.png",
);
const userEmail = computed(() => userStore.userInfo?.email || "未填写");
const unreadMessages = ref(0);

// 获取未读消息数量
const fetchUnreadMessages = async () => {
  try {
    // TODO: 从后端API获取未读消息数量
    unreadMessages.value = 5; // 示例数据
  } catch (error) {
    console.error("获取未读消息数量失败:", error);
  }
};

// 在组件挂载时获取未读消息数量
onMounted(() => {
  if (isLoggedIn.value) {
    fetchUnreadMessages();
  }
});

// 监听登录状态变化
watch(isLoggedIn, (newVal) => {
  if (newVal) {
    fetchUnreadMessages();
  } else {
    unreadMessages.value = 0;
  }
});

// 监听路由变化关闭移动菜单
watch(route, () => {
  mobileMenuVisible.value = false;
});

// 路由活跃状态判断
const isActive = (routeName) => {
  return route.name === routeName || route.name?.startsWith(routeName);
};

// 处理搜索
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    // 记录到搜索历史
    addToSearchHistory(searchQuery.value.trim());

    // 执行搜索导航
    router.push({
      path: "/search",
      query: { q: searchQuery.value.trim() },
    });

    // 重置状态
    searchQuery.value = "";
    headerSearchFocused.value = false;
    headerSuggestionHovered.value = false;
    searchSuggestions.value = [];
  }
};

// 处理登录注册
const handleLogin = () => {
  router.push("/login");
};

// 处理下拉菜单命令
const handleCommand = (command) => {
  switch (command) {
    case "profile":
      router.push("/user/overview");
      break;
    case "orders":
      router.push("/user/orders");
      break;
    case "favorites":
      router.push("/user/favorites");
      break;
    case "messages":
      router.push("/user/messages");
      break;
    case "reviews":
      router.push("/user/reviews");
      break;
    case "settings":
      router.push("/user/settings");
      break;
    case "logout":
      userStore.logout();
      ElMessage.success("已退出登录");
      router.push("/login");
      break;
  }
};

// 搜索相关状态
const searchSuggestions = ref([]);
const searchHistory = ref([]);
const debounceTimer = ref(null);
const mobileSearching = ref(false);
const hotSearchTerms = ref([
  "贵港博物馆",
  "黄姚古镇",
  "文创纪念品",
  "美食推荐",
  "亲子活动",
  "特色民宿",
  "桂剧表演",
  "宝镜塔",
]);

// 是否显示搜索建议和历史记录
const showSearchTips = computed(() => {
  return !searchQuery.value || searchQuery.value.trim() === "";
});

// 处理搜索输入
const handleInputChange = (value) => {
  if (debounceTimer.value) {
    clearTimeout(debounceTimer.value);
  }

  debounceTimer.value = setTimeout(async () => {
    if (value && value.trim().length >= 2) {
      try {
        const { data } = await getSearchSuggestions(value);
        if (data && Array.isArray(data)) {
          searchSuggestions.value = data.slice(0, 10);
        } else {
          // 生成本地搜索建议
          generateLocalSuggestions(value);
        }
      } catch (error) {
        console.error("获取搜索建议失败", error);
        generateLocalSuggestions(value);
      }
    } else {
      searchSuggestions.value = [];
    }
  }, 300);
};

// 生成本地搜索建议
const generateLocalSuggestions = (keyword) => {
  if (!keyword || keyword.trim().length < 2) {
    searchSuggestions.value = [];
    return;
  }

  const terms = [
    ...hotSearchTerms.value,
    ...searchHistory.value,
    "贵港旅游景点",
    "贵港特色美食",
    "贵港文化活动",
    "贵港住宿酒店",
    "贵港交通指南",
  ];

  searchSuggestions.value = [...new Set(terms)]
    .filter((term) => term.toLowerCase().includes(keyword.toLowerCase()))
    .slice(0, 10);
};

// 清空搜索历史
const clearSearchHistory = () => {
  searchHistory.value = [];
  localStorage.removeItem("mobileSearchHistory");
  ElMessage.success("已清空搜索历史");
};

// 处理移动端搜索
const handleMobileSearch = () => {
  if (searchQuery.value.trim()) {
    // 记录到搜索历史
    addToSearchHistory(searchQuery.value.trim());

    // 执行搜索导航
    router.push({
      path: "/search",
      query: { q: searchQuery.value.trim() },
    });

    // 重置状态
    mobileMenuVisible.value = false;
    searchQuery.value = "";
    mobileSearchFocused.value = false;
    mobileSuggestionHovered.value = false;
    searchSuggestions.value = [];
  }
};

// 添加到搜索历史
const addToSearchHistory = (query) => {
  if (!query || query.trim() === "") return;

  const trimmedQuery = query.trim();

  // 移除已存在的相同查询
  searchHistory.value = searchHistory.value.filter(
    (item) => item !== trimmedQuery,
  );

  // 添加到历史开头
  searchHistory.value.unshift(trimmedQuery);

  // 限制历史记录数量
  if (searchHistory.value.length > 10) {
    searchHistory.value = searchHistory.value.slice(0, 10);
  }

  // 保存到本地存储
  localStorage.setItem(
    "mobileSearchHistory",
    JSON.stringify(searchHistory.value),
  );
};

// 组件挂载时加载搜索历史
onMounted(() => {
  // 加载搜索历史
  const history = localStorage.getItem("mobileSearchHistory");
  if (history) {
    try {
      searchHistory.value = JSON.parse(history);
    } catch (e) {
      console.error("解析搜索历史失败", e);
      searchHistory.value = [];
    }
  }
});

// 控制宽屏显示
const isWideScreen = ref(false);

// 检查屏幕宽度
const checkScreenWidth = () => {
  isWideScreen.value = window.innerWidth >= 1024; // lg breakpoint
  if (isWideScreen.value) {
    mobileMenuVisible.value = false;
  }
};

// 监听窗口大小变化
onMounted(() => {
  checkScreenWidth();
  window.addEventListener("resize", checkScreenWidth);
});

onUnmounted(() => {
  window.removeEventListener("resize", checkScreenWidth);
});

// 在 script setup 部分添加天气相关代码
const weather = ref(null);

// 获取天气信息
const fetchWeather = async () => {
  try {
    // 贵港市的经纬度坐标
    const latitude = 23.1135; // 贵港市纬度
    const longitude = 110.2964; // 贵港市经度
    
    // 使用Open-Meteo API获取天气数据
    const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min&current_weather=true&timezone=Asia/Shanghai&forecast_days=1`);
    
    const data = await response.json();
    console.log("全局头部天气API响应:", data);
    
    if (data && data.current_weather) {
      // 获取当前温度和天气代码
      const currentTemp = Math.round(data.current_weather.temperature);
      const weatherCode = data.current_weather.weathercode;
      
      // 根据天气代码获取天气描述
      const weatherDescription = getWeatherDescription(weatherCode);
      
      // 更新天气数据
      weather.value = {
        city: "贵港",
        temperature: currentTemp,
        description: weatherDescription,
        humidity: Math.round(Math.random() * 30) + 50, // 湿度数据Open-Meteo免费版不提供，用随机值替代
      };
    }
  } catch (error) {
    console.error("获取天气信息失败:", error);
    // 使用默认天气数据
    weather.value = {
      city: "贵港",
      temperature: 26,
      description: "晴朗",
      humidity: 65,
    };
  }
};

// 根据天气代码获取天气描述
const getWeatherDescription = (code) => {
  const weatherMap = {
    0: "晴朗",
    1: "晴间多云",
    2: "局部多云",
    3: "多云",
    45: "雾",
    48: "霾",
    51: "小毛毛雨",
    53: "毛毛雨",
    55: "大毛毛雨",
    56: "冻毛毛雨",
    57: "大冻毛毛雨",
    61: "小雨",
    63: "中雨",
    65: "大雨",
    66: "冻雨",
    67: "大冻雨",
    71: "小雪",
    73: "中雪",
    75: "大雪",
    80: "小阵雨",
    81: "中阵雨",
    82: "大阵雨",
    95: "雷暴",
    96: "雷暴伴有小冰雹",
    99: "雷暴伴有大冰雹"
  };
  
  return weatherMap[code] || "晴朗";
};

// 在组件挂载时获取天气信息
onMounted(() => {
  fetchWeather();
});

// 添加导航项动画控制
const navItemsShow = ref(false);

watch(mobileMenuVisible, (newVal) => {
  if (newVal) {
    // 当抽屉打开时，延迟一点显示导航项
    setTimeout(() => {
      navItemsShow.value = true;
    }, 300);
  } else {
    navItemsShow.value = false;
  }
});

const isFullscreen = ref(false);

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    isFullscreen.value = true;
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
      isFullscreen.value = false;
    }
  }
};

// 监听全屏变化
const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement;
};

onMounted(() => {
  document.addEventListener("fullscreenchange", handleFullscreenChange);
});

onUnmounted(() => {
  document.removeEventListener("fullscreenchange", handleFullscreenChange);
});

// 处理移动端登录
const handleMobileLogin = () => router.push("/login");
const handleMobileLogout = () => {
  userStore.logout();
  ElMessage.success("已退出登录");
  router.push("/login");
};

// 添加搜索相关变量
const headerSearchFocused = ref(false);
const headerSuggestionHovered = ref(false);

// 处理搜索框失去焦点
const handleHeaderSearchBlur = () => {
  // 延迟失去焦点，避免点击建议项时下拉框已消失
  setTimeout(() => {
    if (!headerSuggestionHovered.value) {
      headerSearchFocused.value = false;
    }
  }, 200);
};

// 添加移动端搜索相关变量
const mobileSearchFocused = ref(false);
const mobileSuggestionHovered = ref(false);

// 处理移动端搜索框失去焦点
const handleMobileSearchBlur = () => {
  // 延迟失去焦点，避免点击建议项时下拉框已消失
  setTimeout(() => {
    if (!mobileSuggestionHovered.value) {
      mobileSearchFocused.value = false;
    }
  }, 200);
};
</script>

<style lang="scss" scoped>
.global-header {
  @apply h-16 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50 transition-colors duration-300;

  .logo-container {
    @apply relative;

    .logo-image {
      @apply transition-all duration-300;
      filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.1));

      .dark & {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3))
          drop-shadow(0 0 12px rgba(var(--el-color-primary-rgb), 0.4))
          brightness(1.2);
      }
    }

    .logo-text {
      @apply transition-all duration-300;
      text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

      .dark & {
        text-shadow:
          0 0 12px rgba(var(--el-color-primary-rgb), 0.5),
          0 0 16px rgba(var(--el-color-primary-rgb), 0.3),
          0 0 4px rgba(255, 255, 255, 0.4);
      }
    }

    &:hover {
      .logo-image {
        @apply transform scale-105;

        .dark & {
          filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4))
            drop-shadow(0 0 16px rgba(var(--el-color-primary-rgb), 0.5))
            brightness(1.3);
        }
      }

      .logo-text {
        .dark & {
          text-shadow:
            0 0 16px rgba(var(--el-color-primary-rgb), 0.7),
            0 0 20px rgba(var(--el-color-primary-rgb), 0.4),
            0 0 6px rgba(255, 255, 255, 0.5);
        }
      }
    }
  }

  // 功能按钮通用样式
  .action-icon-btn {
    @apply flex items-center justify-center rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-800;
    min-width: 32px;
    min-height: 32px;
    padding: 0;

    .el-icon {
      @apply text-gray-600 dark:text-gray-300;
      font-size: 1.25rem;
    }

    &:hover {
      .el-icon {
        @apply text-primary-500 dark:text-primary-400;
      }
    }
  }

  // 主导航样式
  .main-nav {
    @apply ml-8 space-x-3;

    // 移动端隐藏
    @media (max-width: 1023px) {
      @apply hidden;
    }

    // 大屏幕显示
    @media (min-width: 1024px) {
      @apply flex;
    }
  }

  // 搜索框
  .search-box {
    // 移动端隐藏
    @media (max-width: 1023px) {
      @apply hidden;
    }

    // 大屏幕显示
    @media (min-width: 1024px) {
      @apply block;
    }

    .header-search-dropdown {
      @apply absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-lg z-50 p-3;
      min-width: 280px;
      max-height: 400px;
      overflow-y: auto;
      border: 1px solid var(--color-neutral-3);
    }

    // 自定义输入框样式
    :deep(.arco-input-wrapper) {
      border-radius: 4px;
      border: 1px solid var(--color-neutral-3);
      transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

      &:hover,
      &:focus-within {
        border-color: rgb(var(--primary-6));
        box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.2);
      }

      .arco-input-prefix {
        margin-right: 8px;

        .arco-icon {
          color: var(--color-text-3);
        }
      }
    }
  }

  // 搜索下拉面板通用样式
  .search-dropdown-section {
    @apply mb-3 last:mb-0;

    .search-dropdown-header {
      @apply flex justify-between items-center mb-2;

      .search-dropdown-title {
        @apply text-xs font-medium text-gray-600 dark:text-gray-400;
      }
    }

    .search-dropdown-items {
      @apply space-y-1;

      .search-dropdown-item {
        @apply flex items-center px-2 py-1.5 rounded-md text-sm text-gray-700 dark:text-gray-300 
               hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors;

        .search-dropdown-icon {
          @apply mr-2 text-gray-500 dark:text-gray-400;
        }
      }
    }

    .search-dropdown-tags {
      @apply flex flex-wrap gap-1.5;

      .search-dropdown-tag {
        @apply transition-transform duration-200 cursor-pointer;

        &:hover {
          @apply transform scale-105;
        }

        .arco-icon {
          margin-right: 3px;
          font-size: 12px;
        }
      }
    }
  }

  // 操作按钮（全屏、主题切换）
  .action-btn {
    // 移动端隐藏
    @media (max-width: 1023px) {
      @apply hidden;
    }

    // 大屏幕显示
    @media (min-width: 1024px) {
      @apply block;
    }
  }

  // 汉堡菜单按钮
  .menu-btn {
    // 移动端显示
    @media (max-width: 1023px) {
      @apply flex items-center justify-center w-10 h-10 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors;
    }

    // 大屏幕隐藏
    @media (min-width: 1024px) {
      @apply hidden;
    }

    .el-icon {
      @apply text-xl text-gray-600 dark:text-gray-300;
    }
  }

  // 登录按钮
  .login-btn {
    // 移动端隐藏
    @media (max-width: 639px) {
      @apply hidden;
    }

    // 平板及以上显示
    @media (min-width: 640px) {
      @apply inline-flex;
    }
  }

  .nav-link {
    @apply flex items-center text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-2 py-2 rounded-md transition-all duration-200 no-underline;

    .el-icon {
      @apply mr-1 text-lg transition-transform duration-200;
    }

    &:hover .el-icon {
      @apply transform scale-110;
    }

    &.active {
      @apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/50;
    }
  }

  .theme-toggle {
    @apply p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;

    .el-icon {
      @apply text-gray-600 dark:text-gray-300;
    }
  }
}

// 修改移动端菜单样式
.mobile-menu-drawer {
  :deep(.el-drawer__body) {
    @apply p-0 overflow-hidden;
  }

  .mobile-menu {
    @apply h-full flex flex-col bg-white dark:bg-gray-900;

    .drawer-header {
      @apply flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800 
             bg-white/90 dark:bg-gray-900/90 backdrop-blur-md sticky top-0 z-10;

      .close-btn {
        @apply flex items-center justify-center w-10 h-10 rounded-full 
               hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 
               transform hover:rotate-90;

        .el-icon {
          @apply text-2xl text-gray-500 dark:text-gray-400;
        }
      }
    }

    .mobile-menu-content {
      @apply flex-1 overflow-y-auto pb-safe;

      // 用户信息区域
      .mobile-user-section {
        @apply px-6 py-5;

        .user-profile-card {
          @apply flex items-center p-4 bg-gradient-to-r from-primary-50 to-white dark:from-primary-900/30 dark:to-gray-900
                 rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 cursor-pointer
                 transition-all duration-300 hover:shadow-md active:scale-98;

          .user-avatar-large {
            @apply mr-4 ring-2 ring-primary-100 dark:ring-primary-900/50 ring-offset-2 
                   ring-offset-white dark:ring-offset-gray-900 shadow-lg;
          }

          .user-info {
            @apply flex-1 min-w-0;

            .user-name {
              @apply text-lg font-bold text-gray-900 dark:text-white mb-0.5 truncate;
            }

            .user-email {
              @apply text-sm text-gray-500 dark:text-gray-400 truncate mb-1;
            }

            .view-profile-btn {
              @apply flex items-center text-xs text-primary-600 dark:text-primary-400 mt-1.5;

              .el-icon {
                @apply ml-1 text-xs transition-transform duration-200;
              }

              &:hover .el-icon {
                @apply transform translate-x-1;
              }
            }
          }
        }

        .login-prompt {
          @apply p-5 bg-gradient-to-r from-primary-50 to-white dark:from-primary-900/30 dark:to-gray-900
                 rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 text-center;

          .welcome-text {
            @apply text-lg font-medium text-gray-900 dark:text-white mb-4;
          }

          .login-actions {
            @apply flex space-x-3;

            .login-btn,
            .register-btn {
              @apply flex-1;
            }
          }
        }
      }

      // 搜索区域
      .mobile-search-section {
        @apply px-6 py-4 bg-white dark:bg-gray-900
               border-b border-gray-200 dark:border-gray-800;

        .mobile-search-input {
          @apply w-full h-12 rounded-xl;

          :deep(.arco-input-wrapper) {
            @apply border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800
                   focus-within:border-primary-500 dark:focus-within:border-primary-400
                   hover:border-gray-300 dark:hover:border-gray-600
                   rounded-xl transition-all duration-200;

            .arco-input {
              @apply text-base;
            }

            .arco-input-prefix {
              @apply ml-1 mr-2;

              .arco-icon {
                @apply text-xl text-gray-400 dark:text-gray-500;
              }
            }
          }
        }

        .mobile-search-dropdown {
          @apply absolute left-0 right-0 mt-2 mx-6 bg-white dark:bg-gray-800 rounded-xl 
                 shadow-xl border border-gray-200 dark:border-gray-700 p-3 
                 max-h-[350px] overflow-y-auto z-50;
        }
      }

      // 快捷功能区
      .mobile-quick-actions {
        @apply px-6 py-4 border-b border-gray-200 dark:border-gray-800;

        .quick-action-title {
          @apply text-base font-medium text-gray-900 dark:text-white mb-3;
        }

        .quick-action-grid {
          @apply grid grid-cols-4 gap-4;

          .quick-action-item {
            @apply flex flex-col items-center justify-center p-3 rounded-xl bg-gray-50 dark:bg-gray-800 
                   cursor-pointer transition-all duration-200 hover:bg-primary-50 dark:hover:bg-primary-900/30
                   active:scale-95 text-center hover:shadow-md;

            .el-icon {
              @apply text-2xl text-gray-600 dark:text-gray-300 mb-2
                     transition-all duration-200;
            }

            span {
              @apply text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap;
            }

            &:hover {
              .el-icon {
                @apply text-primary-500 dark:text-primary-400 transform scale-110;
              }

              span {
                @apply text-primary-600 dark:text-primary-400;
              }
            }
          }
        }
      }

      // 天气卡片
      .mobile-weather-card {
        @apply mx-6 my-4 p-4 rounded-xl 
               bg-gradient-to-r from-blue-500 to-blue-600 
               shadow-lg text-white relative overflow-hidden;

        &::before {
          content: "";
          @apply absolute inset-0 bg-white opacity-5;
          background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm32-63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
          background-size: 80px 80px;
          animation: floatingClouds 60s linear infinite;
        }

        @keyframes floatingClouds {
          from {
            background-position: 0 0;
          }
          to {
            background-position: 80px 80px;
          }
        }

        .weather-info-container {
          @apply flex items-center justify-between relative z-10;

          .weather-left {
            @apply flex-1;

            .city-temp {
              @apply flex items-baseline space-x-2 mb-1;

              .temp {
                @apply text-3xl font-bold;
              }

              .city {
                @apply text-lg;
              }
            }

            .weather-desc {
              @apply text-sm text-blue-100;
            }
          }

          .weather-icon {
            @apply flex-shrink-0;

            .el-icon {
              @apply text-4xl text-yellow-300 animate-pulse drop-shadow-lg;
            }
          }
        }
      }

      // 导航菜单
      .mobile-nav-menu,
      .mobile-user-menu {
        @apply px-6 py-4;

        .nav-menu-title,
        .user-menu-title {
          @apply text-base font-medium text-gray-900 dark:text-white mb-3;
        }

        .nav-menu-list,
        .user-menu-list {
          @apply space-y-1 rounded-xl overflow-hidden border border-gray-100 dark:border-gray-800 
                 shadow-sm bg-gray-50 dark:bg-gray-800/50;
        }
      }

      .mobile-user-menu {
        @apply border-t border-gray-200 dark:border-gray-800 pt-4 mt-2;
      }

      .mobile-nav-link {
        @apply flex items-center justify-between py-3.5 px-4 
               text-gray-700 dark:text-gray-300
               hover:bg-white dark:hover:bg-gray-800 
               active:bg-gray-100 dark:active:bg-gray-700
               transition-all duration-200 no-underline 
               transform opacity-0 translate-x-[-10px];

        .link-content {
          @apply flex items-center relative;

          .nav-icon {
            @apply text-xl text-gray-400 dark:text-gray-500 
                   mr-3 transition-all duration-200;
          }

          .nav-text {
            @apply text-base;
          }

          .unread-badge {
            @apply ml-2.5 min-w-[20px] h-5 px-1.5 rounded-full bg-red-500 
                   text-white text-xs font-bold flex items-center justify-center;
          }
        }

        .link-indicator {
          @apply opacity-0 transform -translate-x-2 transition-all duration-200;

          .el-icon {
            @apply text-gray-400 dark:text-gray-500;
          }
        }

        &:hover,
        &.active {
          .nav-icon {
            @apply text-primary-500 dark:text-primary-400;
          }

          .nav-text {
            @apply text-primary-600 dark:text-primary-400;
          }

          .link-indicator {
            @apply opacity-100 translate-x-0;

            .el-icon {
              @apply text-primary-500 dark:text-primary-400;
            }
          }
        }

        &.active {
          @apply bg-white dark:bg-gray-800 font-medium;
        }

        &.slide-in {
          animation: slideIn 0.3s ease-out forwards;
          animation-delay: var(--delay);
        }
      }

      // 底部区域
      .mobile-menu-footer {
        @apply mt-auto px-6 py-6 border-t border-gray-200 dark:border-gray-800;

        .app-version {
          @apply text-xs text-gray-500 dark:text-gray-400 text-center mb-4;
        }

        .logout-button {
          @apply flex items-center justify-center space-x-2 py-3 rounded-xl 
                 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400
                 hover:bg-red-100 dark:hover:bg-red-800/30
                 active:scale-98 transition-all duration-200 cursor-pointer;

          .el-icon {
            @apply text-lg;
          }
        }
      }
    }
  }
}

// 添加手机安全区域底部内边距
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

// 添加点击缩放效果
.active\:scale-98:active {
  transform: scale(0.98);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 用户下拉菜单样式
.user-dropdown-menu {
  :deep(.el-dropdown-menu) {
    @apply p-0 rounded-xl overflow-hidden min-w-[420px] 
           bg-white dark:bg-gray-800
           border border-gray-200 dark:border-gray-700
           shadow-lg dark:shadow-2xl;
  }

  .user-info-section {
    @apply p-4 bg-gradient-to-br from-primary-500/10 to-primary-600/5
           dark:from-primary-500/20 dark:to-primary-600/10
           flex items-center text-left;

    .user-avatar-large {
      @apply mr-4 relative flex-shrink-0;

      &::after {
        content: "";
        @apply absolute inset-0 rounded-full
               ring-2 ring-primary-100 dark:ring-primary-900
               ring-offset-2 ring-offset-white dark:ring-offset-gray-800;
      }

      :deep(.el-avatar) {
        @apply transform transition-transform duration-300 hover:scale-105
               shadow-lg dark:shadow-primary-500/20;
        width: 48px;
        height: 48px;
      }
    }

    .user-details {
      @apply flex-1 min-w-0;

      .user-name {
        @apply text-base font-bold text-gray-900 dark:text-white mb-0.5 truncate;
      }

      .user-email {
        @apply text-sm text-gray-500 dark:text-gray-400 truncate;
      }
    }
  }

  .menu-section {
    @apply py-2;

    .menu-item {
      @apply flex items-center justify-between px-5 py-4 
             text-gray-700 dark:text-gray-300
             hover:bg-primary-50 dark:hover:bg-primary-900/20
             transition-all duration-200 cursor-pointer;

      .el-icon {
        @apply text-xl text-gray-400 dark:text-gray-500
               transition-all duration-200;
      }

      span {
        @apply flex-1 ml-4 text-base;
      }

      .arrow-icon {
        @apply opacity-0 transform translate-x-[-10px] transition-all duration-200 text-lg;
      }

      .badge {
        @apply px-1.5 py-0.5 text-xs rounded-full bg-red-500 text-white
               animate-pulse ml-2 min-w-[20px] text-center;
      }
    }

    /* 使用 group 类的悬停效果 */
    .group:hover {
      .el-icon {
        @apply text-primary-500 dark:text-primary-400;
      }

      span {
        @apply text-primary-600 dark:text-primary-400;
      }

      .arrow-icon {
        @apply opacity-100 translate-x-0;
      }
    }
  }

  .divider {
    @apply h-[1px] bg-gray-100 dark:bg-gray-700;
  }

  .footer-section {
    @apply py-2;

    .logout-item {
      @apply text-red-600 dark:text-red-400
             hover:bg-red-50 dark:hover:bg-red-900/20
             px-5 py-4;

      .el-icon {
        @apply text-xl text-red-500 dark:text-red-400;
      }

      span {
        @apply text-base ml-4;
      }

      &:hover {
        @apply bg-red-50 dark:bg-red-900/20;

        .el-icon {
          @apply text-red-600 dark:text-red-500;
        }
      }
    }
  }
}

// 添加用户头像样式
.user-avatar {
  @apply ring-2 ring-primary-100 dark:ring-primary-900 ring-offset-2 ring-offset-white dark:ring-offset-gray-900;

  &:hover {
    @apply ring-primary-500 dark:ring-primary-400 transform scale-105;
    box-shadow: 0 0 12px rgba(var(--el-color-primary-rgb), 0.3);
  }
}
</style>
